<template>
	<Teleport to="body">
		<Transition name="prompt-fade">
			<div v-if="visible" class="prompt-wrapper" @click="handleWrapperClick">
				<!-- <div class="prompt-mask"></div> -->
				<div :class="['prompt-box', type]">
					<div class="prompt-content">
						<div class="icon-box">
							<uni-icons :type="uniIconName" size="48" :color="iconColor" />
						</div>
						<div class="prompt-main">
							<span class="prompt-text animate-text">{{ message }}</span>
							<span v-if="subMessage" class="prompt-sub-text">{{ subMessage }}</span>
						</div>
						<div v-if="showProgress" class="progress-bar">
							<div class="progress-track">
								<div
									class="progress-fill"
									:style="{
										width: `${(remaining / (duration / 1000)) * 100}%`,
									}"
								></div>
							</div>
							<span class="countdown-text">{{ remaining }}s</span>
						</div>
					</div>
				</div>
				<div v-if="closeable" class="close-btn" @click="handleClose">
					<uni-icons type="closeempty" size="14" color="#fff" />
				</div>
			</div>
		</Transition>
	</Teleport>
</template>

<script setup>
	const props = defineProps({
		visible: {
			type: Boolean,
			default: false,
		},
		message: {
			type: String,
			default: '',
		},
		type: {
			type: String,
			default: 'success',
			validator: (value) => {
				return ['pay-success', 'success', 'pay-error', 'error', 'pay-timeout', 'renew-timeout'].includes(value);
			},
		},
		duration: {
			// 自动关闭时间，0 表示不自动关闭
			type: Number,
			default: 0,
		},
		closeable: {
			// 是否显示关闭按钮
			type: Boolean,
			default: false,
		},
		maskCloseable: {
			// 是否可点击遮罩关闭
			type: Boolean,
			default: true,
		},
		subMessage: {
			type: String,
			default: '',
		},
	});

	const emit = defineEmits(['update:visible', 'close', 'timeout']);

	// 显示进度条
	const showProgress = computed(() => props.duration > 0);

	// 使用 useCountdown
	const { remaining, start, stop } = useCountdown(
		computed(() => Math.round(props.duration / 1000)),
		{
			controls: true,
			onComplete: () => {
				emit('timeout', props.type);
				handleClose();
			},
			onTick: () => {
				console.log('倒计时时间:', remaining.value);
			},
		}
	);

	// 关闭处理
	const handleClose = () => {
		stop();
		emit('update:visible', false);
		emit('close');
	};

	// 点击遮罩处理
	const handleWrapperClick = (e) => {
		if (props.maskCloseable && e.target.classList.contains('prompt-wrapper')) {
			console.log('Mask clicked...'); // 添加调试日志
			handleClose();
		}
	};

	// 监听显示状态
	watch(
		() => props.visible,
		(newVal) => {
			console.log('🚀 ~ watch ~ newVal:', newVal);
			if (newVal && props.duration > 0) {
				console.log(`Setting auto close timer: ${props.duration}ms`);
				start();
			} else {
				console.log('Auto close timer stopped');
				stop();
			}
		},
		{
			immediate: true,
		}
	);

	const uniIconName = computed(() => {
		const icons = {
			'pay-success': 'checkmarkempty',
			success: 'checkbox-filled',
			'pay-error': 'closeempty',
			error: 'closeempty',
			'pay-timeout': 'closeempty',
			'renew-timeout': 'closeempty',
		};
		return icons[props.type];
	});

	const iconColor = computed(() => {
		const colors = {
			'pay-success': '#52c41a',
			success: '#1890ff',
			'pay-error': '#ff4d4f',
			error: '#faad14',
			'pay-timeout': '#722ed1',
			'renew-timeout': '#eb2f96',
		};
		return colors[props.type];
	});
</script>

<style lang="scss" scoped>
	// .prompt-fade-enter-active,
	// .prompt-fade-leave-active {
	// 	// transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
	// 	transition: all 0.3s ease-in-out;
	// }

	// .prompt-fade-enter-from,
	// .prompt-fade-leave-to {
	// 	// transform: scale(0.95);
	// 	opacity: 0;
	// }

	.prompt-wrapper {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		z-index: 9998;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		background: rgba(0, 0, 0, 0.65);

		:deep(.uni-icons) {
			font-size: 26px !important;
		}
	}

	.prompt-mask {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.65);
		backdrop-filter: blur(6px);
	}

	.prompt-box {
		position: relative;
		padding: 40px 48px;
		min-width: 360px;
		border-radius: 16px;
		background: rgba(255, 255, 255, 0.98);
		backdrop-filter: blur(10px);
		box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.1);
		z-index: 9999;
		border: 1px solid rgba(255, 255, 255, 0.2);

		// 支付成功主题
		&.pay-success {
			background: linear-gradient(145deg, rgba(82, 196, 26, 0.15), rgba(82, 196, 26, 0.05));
			border: 1px solid rgba(82, 196, 26, 0.2);
			box-shadow: 0 12px 32px rgba(82, 196, 26, 0.2);
		}

		// 操作成功主题
		&.success {
			background: linear-gradient(145deg, rgba(24, 144, 255, 0.15), rgba(24, 144, 255, 0.05));
			border: 1px solid rgba(24, 144, 255, 0.2);
			box-shadow: 0 12px 32px rgba(24, 144, 255, 0.2);
		}

		// 支付失败主题
		&.pay-error {
			background: linear-gradient(145deg, rgba(255, 77, 79, 0.15), rgba(255, 77, 79, 0.05));
			border: 1px solid rgba(255, 77, 79, 0.2);
			box-shadow: 0 12px 32px rgba(255, 77, 79, 0.2);
		}

		// 操作失败主题
		&.error {
			background: linear-gradient(145deg, rgba(250, 173, 20, 0.15), rgba(250, 173, 20, 0.05));
			border: 1px solid rgba(250, 173, 20, 0.2);
			box-shadow: 0 12px 32px rgba(250, 173, 20, 0.2);
		}

		// 支付超时主题
		&.pay-timeout {
			background: linear-gradient(145deg, rgba(114, 46, 209, 0.15), rgba(114, 46, 209, 0.05));
			border: 1px solid rgba(114, 46, 209, 0.2);
			box-shadow: 0 12px 32px rgba(114, 46, 209, 0.2);
		}

		// 续交缴费超时主题
		&.renew-timeout {
			background: linear-gradient(145deg, rgba(235, 47, 150, 0.15), rgba(235, 47, 150, 0.05));
			border: 1px solid rgba(235, 47, 150, 0.2);
			box-shadow: 0 12px 32px rgba(235, 47, 150, 0.2);
		}
	}
	.close-btn {
		margin-top: 20px;
		width: 40px;
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		transition: all 0.3s ease;
		background: rgba(0, 0, 0, 0.08);

		&:hover {
			background: rgba(0, 0, 0, 0.05);
		}

		&:active {
			background: rgba(0, 0, 0, 0.08);
		}
	}
	.prompt-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 28px;
	}

	.icon-box {
		width: 80px;
		height: 80px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.9);
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);

		.pay-success & {
			background: rgba(82, 196, 26, 0.1);
		}

		.success & {
			background: rgba(24, 144, 255, 0.1);
		}

		.pay-error & {
			background: rgba(255, 77, 79, 0.1);
		}

		.error & {
			background: rgba(250, 173, 20, 0.1);
		}

		.pay-timeout & {
			background: rgba(114, 46, 209, 0.1);
		}

		.renew-timeout & {
			background: rgba(235, 47, 150, 0.1);
		}
	}

	.prompt-main {
		text-align: center;
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

	.prompt-text {
		font-size: 20px;
		color: #fff;
		font-weight: 600;
		line-height: 1.5;
		letter-spacing: 0.5px;
		text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);

		&.animate-text {
			animation: textPulse 2s ease-in-out infinite, textSlide 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
		}
	}

	.prompt-sub-text {
		font-size: 16px;
		color: #fff;
		font-weight: normal;
		line-height: 1.4;
		margin-top: 12px;
	}

	@keyframes textPulse {
		0%,
		100% {
			opacity: 1;
			transform: scale(1);
		}
		50% {
			opacity: 0.85;
			transform: scale(0.98);
		}
	}

	@keyframes textSlide {
		from {
			opacity: 0;
			transform: translateY(-15px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	// 图标弹跳动画
	.animate-bounce {
		animation: iconBounce 1s cubic-bezier(0.36, 0, 0.66, -0.56) forwards;
	}

	@keyframes iconBounce {
		0%,
		20%,
		50%,
		80%,
		100% {
			transform: translateY(0);
		}
		40% {
			transform: translateY(-20px);
		}
		60% {
			transform: translateY(-10px);
		}
	}

	// 更新进度条样式
	.progress-bar {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 12px 20px;
		display: flex;
		align-items: center;
		gap: 12px;
		background: rgba(0, 0, 0, 0.02);
		border-radius: 0 0 16px 16px;
		box-sizing: border-box;
	}

	.progress-track {
		flex: 1;
		height: 4px;
		background: rgba(0, 0, 0, 0.08);
		border-radius: 2px;
		overflow: hidden;
	}

	.progress-fill {
		height: 100%;
		border-radius: 2px;
		transition: width 0.3s linear;

		.pay-success & {
			background: linear-gradient(90deg, #52c41a, #95de64);
		}

		.success & {
			background: linear-gradient(90deg, #1890ff, #69c0ff);
		}

		.pay-error & {
			background: linear-gradient(90deg, #ff4d4f, #ff7875);
		}

		.error & {
			background: linear-gradient(90deg, #faad14, #ffd666);
		}

		.pay-timeout & {
			background: linear-gradient(90deg, #722ed1, #b37feb);
		}

		.renew-timeout & {
			background: linear-gradient(90deg, #eb2f96, #f759ab);
		}
	}

	.countdown-text {
		font-size: 14px;
		color: #666;
		min-width: 36px;
		text-align: right;
	}
</style>
